<template>
  <div class="bgc-fff" style="margin-top: 1.17rem;">
    <div class="main">
      <!-- location -->
      <div class="main-location bor-bottom">
        <div class="main-location-left bor-right" @click="nowPlaceClick">
          <img :src="staticImgData.locationUrl" alt="">
          <p>获取当前位置</p>
        </div>
        <div class="main-location-rigth">
          <span v-if='driverParam.nowLocation.nowPlace'>{{driverParam.nowLocation.nowPlace}}</span>
          <span v-else>暂无位置信息</span>
        </div>
      </div>
      <!-- fill-box -->
      <!-- @keyup.enter='Action(startCityKeyword)'  -->
      <div class="fill-box clearfix bor-bottom">
        <div class="fill-item fill-b">
          <i class="mr25 bgc-1e90ff "></i>
          <div class="fill-input bor-bottom">
            <input  type="text"  placeholder="请输入意向起运地(城市)"
                    @focus="startCityInputEnter()" style="width: 3.25rem;"
                    v-model.trim="startCityKeyword">
          </div>
          <div style="clear:both;"></div>
        </div>
        <div class="fill-item">
          <i class="mr25 bgc-ff9b7b "></i>
          <div class="fill-input">
            <input v-show="spanShowVal === 'span'" type="text" class="text-show-block"
                   :placeholder="startPlaceholder"
                   @focus="endCityInputEnter()"
                   @blur="endCityInputLeave()"
                   v-model.trim="endCityKeyword">
            <div @onmouseenter="endCityInputEnter" @click="endCityInputEnter()"
                 class="text-show-block"
                 v-show="spanShowVal === 'spanlist'">
              <span style="line-height: .24rem;height: .24rem;"
                    v-for="(item4,index4) in endCityKeywordList" :key="index4">
                {{item4 }}<i v-show="(index4+1) !== endCityKeywordList.length">,</i>
              </span>
            </div>
          </div>
          <div style="clear:both;"></div>
        </div>
      </div>
      <!--多选展示-->
      <v-checkboxShow
        v-show="endCityKeywordList.length !== 0"
        :checkbox-data="endCityKeywordList"
        :checkbox-info="checkboxInfo"
        @return-list="changeList" >
      </v-checkboxShow>
      <!--input  -->
      <div class="input-cells bor-bottom">
        <div class="f-fl input-label">可装载台数</div>
        <input type="tel" class="cell-input" placeholder="请输入台数"
               style="width: 1.84rem;"
               @keyup="keyupCanLoadNum(driverParam.canLoadNum)"
               maxlength="2"
               v-model.trim="driverParam.canLoadNum" />
      </div>
      <!-- pick -->
      <div class="input-cells bor-bottom input-loadtime" @click="showPickTimeType()">
        <div class="f-fl input-label">期望装车时间</div>
        <div class="flex l-center a-left">
          <input v-model="driverParam.loadTime" class="cell-input ta-r mr10" type="text"
                 placeholder="请选择" readonly="true"  @focus="showPickTimeType()" />
          <img class="icon-btn-right" :src="staticImgData.btnRightUrl" alt="">
        </div>
      </div>
      <!-- btn -->
      <div class="pad-l-r15 mt100">
        <!--:class="subDisabled? 'bgc-d8d8d8':'bgc-01a4f6'"-->
        <p class="large-btn bgc-01a4f6"  @click="subButton()">上报</p>
      </div>

    </div>

    <!-- loading -->
    <v-loading v-show="loadingShow"></v-loading>

    <!-- 城市picker -->
    <div class="down-picker-bg " :class="[{'down-picker-bg-up':downPickerShow}]" >
      <div class="down-picker-container" :class="[{'down-picker-container-up':downPickerShow}]">
        <!--title-->
        <div class="flex l-center a-between f14 bor-bottom bgc-fff pad15">
          <span @click="closeDownPicker()" class="c-999">取消</span>
          <span @click="closeDownPicker()" class="c-01a4f6" >确定</span>
        </div>
        <Picker :data='pickerData' v-model='pickerSelect' @on-change='placeChange'></Picker>
        <!-- 写法错误onValuesChange() <mt-picker :slots="slots"  @change="onValuesChange()"></mt-picker> -->
        <!--<mt-picker :slots="slots"  @change="onValuesChange"></mt-picker>-->
        <!--<div class="down-picker-btn-box"  @click="closeDownPicker()">-->
          <!--确定-->
        <!--</div>-->
      </div>
    </div>

    <!-- 时间方式tab -->
    <div v-show="downPickerTimeShow && isDownPickerTimeShow" class="down-picker-bg " :class="[{'down-picker-bg-up':downPickerTimeShow && isDownPickerTimeShow}]" >
      <div class="down-picker-container2" :class="[{'down-picker-container-up':downPickerTimeShow}]">
        <!-- <div class="down-picker-title">
          期望装车时间
        </div> -->
        <div style="width:70%;margin: 0 auto;">
          <div id="multiPickerOnstie1" class="br-8 bgc-fff flex a-center l-center">
            <div class="mr10 time-type-item" :class="[{'active':timeTypeShowName==='now'}]"
                 @click="timeTypeClick1('now')">现在</div>
            <div class="time-type-item" :class="[{'active':timeTypeShowName==='make'}]"
                 @click="timeTypeClick2('make')">预约</div>
          </div>
        </div>
        <!-- <div class="down-picker-btn-box"  @click="closeDownPicker2()">
          确定
        </div> -->
      </div>
    </div>

    <!-- 时间picker -->

  </div>
</template>

<script type="text/ecmascript-6">
  import '@/styles/multiPicker.css'
  import '@/styles/downPicker.css'
  import { Picker } from 'vux'
  import Loading from '@/components/common/loading/loading'
  import { Toast } from 'mint-ui'
  import * as ThreeStorage from '@/utils/store/token.js' // cookie local session 统一管理
  import * as AddClassApi from '@/api/addClass'
  import MultiPicker from '@/utils/multiPicker' // 自定义时间控件-picker结构
  import dateList from '@/utils/dateList' // 自定义时间控件-时间数据
  import Utils from '@/utils/util'
  import * as DevopApi from '@/api/devop'
  import * as DriverApi from '@/api/dirver'
  import CheckboxShow from '@/components/common/checkbox/checkbox_show'
  import LocationAMap from '@/utils/positionLocation/positionLocation'
  export default {
    name: 'add_class',
    data() {
      return {
        staticImgData: {
          locationUrl: require('@/assets/image/v1/user/user_class/icon_location.png'),
          btnRightUrl: require('@/assets/image/common/btn_right.png')
        },
        driverParam: {
          wantStartPlace: '', // 起运地
          wantEndPlace: '', // 目的地
          departRegionCode: '', // 始发区域行政编码
          destRegionCode: '', // 目的区域行政编码
          canLoadNum: '', // 可装载数目
          loadTime: '',
          nowLocation: {
            lat: '',
            lon: '',
            province: '',
            city: '',
            district: '',
            nowPlace: '',
            Address: '' // 详细地址
          }
        },
        loadTime2: '',
        startCityKeyword: '',
        startCityCode: '',
        startProvince: '', // 省
        startProvinceCode: '', // 省
        endCityKeyword: '',
        endCityCode: '',
        endCityKeywordList: [],
        endCityCodeList: [],
        checkboxInfo: {
          title: '已选择(多选)：'
        },
        keywordChangeOpen: '',
        slots: [{ values: [] }],
        cityListData: [],
        pickerData: [],
        pickerSelect: [],
        showPickListObj: [],
        destArray: [], // 目的地数组
        downPickerShow: false, // 城市控件
        searchRun: false, // 是否开启查询
        isOldvalHave: true, // 防止初次 oldVal undefined报错
        loadingShow: false,
        cityPickerTitleShow: false,
        isHavePickerCity: false, // values[0] 有滑动选值 赋值了没有
        endInputShow: true, // 目的地 展示 input输入框 or 数据展示block
        timeTypeShowName: 'now', // 现在now  or 预约make
        spanShowVal: 'span', // span or spanlist
        spanActiveIndex: -1, // 已选择 citylist 中的 当前选中 index
        downPickerTimeShow: false, // 时间类型tab
        isDownPickerTimeShow: true, // 避免 piker 与 toast提示层冲突
        startPlaceholder: '请输入意向目的地(多选省市)',
        subDisabled: false,
        cityPickerVal0: ''
      }
    },
    components: {
      Picker,
      'v-checkboxShow': CheckboxShow,
      'v-loading': Loading
    },
    created() {
    },
    mounted() {
      this.$watch('startCityKeyword', (newVal, oldVal) => {
        if (this.searchRun) {
          // 当弹窗 选中值 关闭后 再重新开启 keyword查询
          let timer = null
          clearTimeout(timer)
          // 再次创建延时器
          const val = newVal
          if (val !== '' && newVal.length > oldVal.length) {
            timer = setTimeout(() => {
              const req_params = { cityName: val }
              DriverApi.getOriginCity(req_params).then(res => {
                console.log('getOriginCity', res)
                if (res.code === 0) {
                  this.cityListData = res.data
                  if (this.cityListData.length !== 0 && this.startCityKeyword !== '') {
                    this.keywordChangeOpen = 'startCityKeyword'
                    this.showPickCity()
                  } else {
                    Toast({
                      message: '未查询出(中联)业务相关城市',
                      duration: 1500
                    })
                    setTimeout(() => { this.startCityKeyword = '' }, 1500)
                  }
                }
              }).catch(res => {
                console.warn('error', res)
              })
            }, 400)
          }
        }
      })
      this.$watch('endCityKeyword', (newVal, oldVal) => {
        if (this.searchRun) {
          // 当弹窗  选中值关闭后 再重新开启 keyword查询
          let timer = null
          clearTimeout(timer)
          // 再次创建延时器
          const val = newVal
          if (this.isOldvalHave) {
            oldVal = '' // 防止初次 oldVal undefined报错
            this.isOldvalHave = false
          }
          console.log('endCityKeyword', this.endCityKeyword, 'newVal', newVal, 'oldVal', oldVal)
          if (val !== '' && this.endCityKeyword.length >= 1 && newVal.length > oldVal.length) {
            timer = setTimeout(() => {
              const req_params = {
                keyword: val,
                level: 0
              }
              DevopApi.getProvinceCitylist(req_params).then(res => {
                // console.log('getCitylist', res)
                if (res.code === 0) {
                  // 先将查询出的数据 level 为 3、4的数据 过滤掉
                  const levelList = res.data.filter((item) => {
                    return item.level < 3
                  })
                  // console.log('levelList-filter<3', levelList)
                  for (let c = 0; c < levelList.length; c++) {
                    // 天津120 北京110 上海310 重庆500 ,清除这个几个下属城区
                    const reg1 = /^[1][1][0][0-9][0-9][0-9]/
                    const reg2 = /^[1][2][0][0-9][0-9][0-9]/
                    const reg3 = /^[5][0][0][0-9][0-9][0-9]/
                    const reg4 = /^[3][1][0][0-9][0-9][0-9]/
                    const itm = levelList[c]
                    if (itm.level === '2' && (reg1.test(itm.code) || reg2.test(itm.code) || reg3.test(itm.code) || reg4.test(itm.code))) {
                      // console.log('进入删除', itm)
                      levelList.splice(c, 1)
                    }
                  }
                  this.cityListData = levelList
                  // console.log('filter(level>2)-this.cityListData', this.cityListData)
                  // 如果listdata数据不为空 并且 input输入的值 不为空，则展示 cityPicker
                  if (this.cityListData.length !== 0 && this.endCityKeyword !== '') {
                    this.keywordChangeOpen = 'endCityKeyword'
                    this.showPickCity()
                  }
                }
              }).catch(res => {
                console.warn('error', res)
              })
            }, 400)
          }
        }
      })
    },
    methods: {
      findCityCode: function(city, array) {
        for (let j = 0; j < array.length; j++) {
          const item = array[j]
          if (item.cityName === city) {
            console.log('item.cityCode', item.cityCode)
            return item
          }
        }
      },
      // cityPicker 用户有移动选项时 才触发 取
      placeChange: function(values) {
        console.log('new Value', values)
        const res_val = values
        if (res_val) {
          this.isHavePickerCity = true
          // 当 startCityKeyword 时候picker 选择器选中的 value值 会 赋给startCityKeyword
          if (this.keywordChangeOpen === 'startCityKeyword') {
            this.startCityKeyword = values[0]
            this.cityPickerVal0 = values[0]
          } else if (this.keywordChangeOpen === 'endCityKeyword') {
            this.endCityKeyword = values[0]
            this.cityPickerVal0 = values[0]
            // console.log('endCityKeyword', this.endCityKeyword, 'values[0]', values[0])
          }
        }
        this.keywordChangeOpen === '' // 重置
      },
      // 监听可装载数目输入值
      keyupCanLoadNum: function(value) {
        const input_num = value
        if (input_num !== '' && input_num.length === 1) {
          if (input_num === '0' || input_num === 0) {
            this.driverParam.canLoadNum = ''
          }
          this.driverParam.canLoadNum = input_num.replace(/[^1-9]/g, '')
        } else {
          if (input_num === '0' || input_num === 0) {
            this.driverParam.canLoadNum = ''
          }
          this.driverParam.canLoadNum = input_num.replace(/\D/g, '')
          if (input_num && input_num > 20) {
            Toast({
              message: '超出数量限制(20台)!',
              duration: 1500
            })
            // 此时阻止piker 能弹出 避免 piker 与 toast提示层 显示冲突
            this.isDownPickerTimeShow = false
            setTimeout(() => {
              this.driverParam.canLoadNum = null
              this.isDownPickerTimeShow = true
            }, 1600)
          }
        }
      },
      // 展示 cityPicker
      showPickCity: function(keyword) {
        const that = this
        const new_resData = that.cityListData
        const showPickList2 = []
        that.showPickListObj = []
        let lay_obj = {}
        if (new_resData.length !== 0) {
          for (let i = 0; i < new_resData.length; i++) {
            // 防止 city 为null 时候报错
            if (this.keywordChangeOpen === 'startCityKeyword') {
              // 搜索 起运地时候  new_resData[i].city
              if (new_resData[i].city) {
                lay_obj = {
                  cityName: new_resData[i].city,
                  cityCode: new_resData[i].cityCode,
                  cityParentCode: new_resData[i].provinceCode,
                  cityParentName: new_resData[i].province
                }
                showPickList2.push(new_resData[i].city)
                that.showPickListObj.push(lay_obj)
              }
              // 如果值填完了 就开启 picker组件
              if (i === (new_resData.length - 1)) {
                this.pickerData = []
                this.pickerData.push(showPickList2)
                // console.log(' this.pickerData', this.pickerData)
                // 如果 keyword查询出 数据，则开启 picker组件 并且开启 keword 热搜索
                if (this.cityListData.length !== 0) {
                  that.searchRun = false
                  that.downPickerShow = true
                }
              }
            } else {
              // 搜索 目的地时候  new_resData[i].label
              if (new_resData[i].label) {
                lay_obj = {
                  cityLevel: new_resData[i].level,
                  cityParentCode: new_resData[i].parentCode,
                  cityName: new_resData[i].label,
                  cityCode: new_resData[i].code
                }
                showPickList2.push(new_resData[i].label)
                that.showPickListObj.push(lay_obj)
              }
              // 如果值填完了 就开启 picker组件
              if (i === (new_resData.length - 1)) {
                this.pickerData = []
                this.pickerData.push(showPickList2)
                // console.log(' this.pickerData', this.pickerData)
                // 如果 keyword查询出 数据，则开启 picker组件 并且开启 keword 热搜索
                if (this.cityListData.length !== 0) {
                  that.searchRun = false
                  that.downPickerShow = true
                }
              }
            }
          }
        }
      },
      // 展示 timeTypeTab,  now or make
      showPickTimeType: function() {
        // timeTypeTab 展示
        this.downPickerTimeShow = true
      },
      // now 取现在时间戳
      timeTypeClick1: function(val) {
        this.timeTypeShowName = val
        const nowDateDay = Date.parse(new Date()) // 获取目前时间戳
        const nowDateDayVal = Utils.formatTime(nowDateDay, 'Y-M-D h:m:s')
        this.driverParam.loadTime = nowDateDayVal
        this.downPickerTimeShow = false
      },
      // make 取 预约时间 唤起 timePicker
      timeTypeClick2: function(val) {
        this.timeTypeShowName = val
        const that = this
        that.downPickerTimeShow = false
        const mydateListOnsite1 = dateList.timeList(3) // 后3天
        // 初始化时间列表
        dateList.init()
        // 上门回收时间选择
        new MultiPicker({
          input: 'multiPickerOnstie1', // 点击触发插件的input框的id
          container: 'targetContainer1', // 插件插入的容器id
          fillContent: 'multiPickerOnstie1',
          jsonData: mydateListOnsite1,
          pickerShow: true,
          success: function(arr, _fillContent) {
            const datelist = dateList.dateRst(arr, _fillContent, true)
            // that.loadTime2 = datelist.timeLine
            that.driverParam.loadTime = datelist.fillDate + ':00'
            console.log('datelist', datelist, 'that.driverParam.loadTime', that.driverParam.loadTime)
          }
        })
      },
      // 关闭 cityPiker 主要用于 多选
      closeDownPicker: function() {
        const that = this
        that.downPickerShow = false
        let cityItem = {}
        let repeat = false
        // picker 关闭才 赋值
        const list_data = that.endCityKeywordList
        // 有 进入picker 滑动picker选了 值 才给赋值
        if (this.isHavePickerCity) {
          if (this.cityPickerVal0) {
            // 起运地 单个
            if (that.keywordChangeOpen === 'startCityKeyword') {
              that.startCityKeyword = that.cityPickerVal0
              cityItem = that.findCityCode(that.cityPickerVal0, that.showPickListObj)
              that.startCityCode = cityItem.cityCode
              that.startProvince = cityItem.cityParentName
              that.startProvinceCode = cityItem.cityParentCode
            } else if (this.keywordChangeOpen === 'endCityKeyword') {
              // 目的地 多个
              if (list_data.length === 0) {
                that.endCityKeywordList.push(that.cityPickerVal0)
                cityItem = that.findCityCode(that.cityPickerVal0, that.showPickListObj)
                that.endCityCode = cityItem.code
                that.destArray.push(cityItem)
                that.endCityCodeList.push(that.endCityCode)
                if (that.endCityKeywordList.length > 0) {
                  that.spanShowVal = 'spanlist'
                } else {
                  that.spanShowVal = 'span'
                }
              } else {
                for (let c = 0; c < that.endCityKeywordList.length; c++) {
                  const item_val = that.endCityKeywordList[c]
                  if (item_val === that.cityPickerVal0) {
                    Toast({
                      message: '您已选过' + this.cityPickerVal0,
                      duration: 1500
                    })
                    repeat = true
                    break
                  }
                }
                if (this.cityPickerVal0.length >= 2) {
                  if (!repeat) {
                    that.endCityKeywordList.push(this.cityPickerVal0)
                    cityItem = that.findCityCode(that.cityPickerVal0, that.showPickListObj)
                    that.endCityCode = cityItem.code
                    that.destArray.push(cityItem)
                    that.endCityCodeList.push(that.endCityCode)
                    if (that.endCityKeywordList.length > 0) {
                      that.spanShowVal = 'spanlist'
                    } else {
                      that.spanShowVal = 'span'
                    }
                    console.log('n次', that.endCityKeywordList, that.endCityCodeList)
                  }
                }
              }
            }
          }
        }
        this.endCityKeyword = ''
        that.searchRun = false
      },
      // 返回子组件 操作后的数据
      changeList: function(data) {
        // console.log('changeList()-data', data)
        this.endCityKeywordList = data
        if (this.endCityKeywordList.length !== 0) {
          this.spanShowVal = 'spanlist'
          this.startPlaceholder = '请继续输入'
        } else {
          this.spanShowVal = 'span'
          this.startPlaceholder = '请输入意向目的地(多选省市)'
        }
      },
      // 目的地输入框获焦
      endCityInputEnter: function(isTure) {
        this.spanShowVal = 'span'
        this.searchRun = true
        this.cityPickerTitleShow = true
        this.endCityKeyword = ''
        this.keywordChangeOpen = 'endCityKeyword'
      },
      // 目的地输入框失焦
      endCityInputLeave: function(isTure) {
        // this.endInputShow = false
        if (this.endCityKeywordList.length > 0) {
          this.spanShowVal = 'spanlist'
          this.startPlaceholder = '请继续输入'
        } else {
          this.spanShowVal = 'span'
          this.startPlaceholder = '请输入意向目的地(多选省市)'
        }
        this.searchRun = false
      },
      // 起运地输入框获焦
      startCityInputEnter: function() {
        // input 获取焦点 开启 监听查询
        this.keywordChangeOpen = ''
        this.cityPickerTitleShow = false
        this.searchRun = true
        this.keywordChangeOpen = 'startCityKeyword'
      },
      // 提交
      subButton: function() {
        const that = this
        const driver_Id = ThreeStorage.getDriverId()
        const new_endCityListVal = this.endCityKeywordList.join(',')
        const new_endCityListCodeVal = this.endCityCodeList.join(',')
        const dest_Array = that.destArray
        const addClass_params = {
          driverId: driver_Id,
          departRegion: that.startCityKeyword, // 起运地
          departRegionCode: that.startCityCode, // 起运地code
          departCity: that.startCityKeyword, // 起运地
          departCityCode: that.startCityCode, // 起运地code
          departProvince: that.startProvince, // 起运地所在省
          departProvinceCode: that.startProvinceCode, // 起运地所在省code
          destRegion: new_endCityListVal, // 目的地
          destRegionCode: new_endCityListCodeVal, // 目的地 城市编码
          destArray: dest_Array, // 目的地对象 数组集
          amtExp: that.driverParam.canLoadNum, // 运载数目
          gmtExpLoad: that.driverParam.loadTime, // 可装载时间
          checkinAddr: that.driverParam.nowLocation.Address, // 当前位置
          province: that.driverParam.nowLocation.province,
          city: that.driverParam.nowLocation.city,
          checkinLatitude: that.driverParam.nowLocation.lat,
          checkinLongtitude: that.driverParam.nowLocation.lon
        }
        const check_res = that.checkParam(addClass_params)
        if (check_res) {
          that.loadingShow = true
          if (!that.subDisabled) {
            that.subDisabled = true
            setTimeout(() => {
              AddClassApi.getAddClass(addClass_params).then(res => {
                that.subDisabled = false
                that.loadingShow = false
                if (res.code === 0) {
                  Toast({
                    message: '提交成功',
                    duration: 1500
                  })
                  this.$emit('to-addclasshistory', 1) // 切换tabindex
                }
              }).catch(res => {
                that.subDisabled = false
                that.loadingShow = false
                console.warn('error', res)
              })
            }, 300)
          }
        }
      },
      // 提交值 预校检
      checkParam: function(addClass_params) {
        const { departRegion, destRegion, amtExp, gmtExpLoad, checkinAddr } = addClass_params
        if (checkinAddr === '') {
          Toast({
            message: '请先获取当前位置'
          })
          return
        }
        if (departRegion === '') {
          Toast({
            message: '请先填写起运地'
          })
          return
        }
        if (destRegion === '') {
          Toast({
            message: '请先填写目的地'
          })
          return
        }
        if (amtExp === '') {
          Toast({
            message: '请先填写运载数目'
          })
          return
        }
        const regPos = /^\d+$/ // 非负整数
        // console.log('amtExp', amtExp, 'regPos.test(amtExp)', regPos.test(amtExp))
        if (!regPos.test(amtExp)) {
          Toast({
            message: '装载数目请填写正整数'
          })
          return
        }
        if (gmtExpLoad === '') {
          Toast({
            message: '请先选择可装载时间'
          })
          return
        }
        return true
      },
      nowPlaceClick: function() {
        const that = this
        that.loadingShow = true
        // 位置信息获取-当api请求失败或成功后，执行callback回调 => function(res_data){}
        LocationAMap.getPosition(function(res_data) {
          if (res_data.status) {
            that.loadingShow = false
            Toast({
              message: '获取当前位置成功！',
              duration: 1000
            })
            that.driverParam.nowLocation = res_data.nowLocation
            // that.startCityKeyword = res_data.nowLocation.city
          } else {
            that.loadingShow = false
            Toast({
              message: '获取当前位置失败！',
              duration: 1000
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../../styles/util.css';
  /* common */
  .pad-t-b5{
    padding-top: .05rem;
    padding-bottom: .05rem;
  }
  .pad-l-r50{
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .large-btn{
    border-radius: .08rem;
  }
  .input-cells{
    display: flex;
    justify-content:space-between;
    align-items: center;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    padding: .06rem .15rem;
    height: .32rem;
    line-height: .32rem;
    font-size: .14rem;
  }
  .input-label{
    margin-left: 0;
    font-size: .14rem;
    width: .9rem;
    margin-left: 0;
  }
  .input-cells>input{
    font-size: .14rem;
    text-align: right;
  }
  .input-cells>img{
    width: .06rem;
    height: .1rem;
    margin-right: .03rem;
  }
  .large-btn.bgc-d8d8d8{
    background-color: #d8d8d8;
  }
  .input-loadtime>input{
    width:2.2rem;
    text-align: right;
  }
  /* tab 现在 预约 */
  .time-type-item{
    color: #666;
    font-size: .16rem;
    line-height: .22rem;
    text-align: center;
    padding:.06rem .16rem;
    margin: .18rem 0;
  }
  .time-type-item.active{
    color: #000;
    border: 1px solid #dedede;
    background-color: #ecf2f9;
    border-radius: .52rem;
  }
  /* input or text-show-block*/
  .fill-input>input{
    text-align: left;
    padding: .13rem 0;
    line-height: .24rem;
    font-size: .14rem;
    overflow: hidden;
  }
  .text-show-block{
    text-align: left;
    padding: .13rem 0;
    line-height: .24rem;
    height: .24rem;
    font-size: .14rem;
    overflow: hidden;
    display: flex;
    flex: auto;
  }
</style>
